<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入vue样式-->
    <script src="./vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./index2.css">
    <!-- 引入组件库 -->
    <script src="./index2.js"></script>
    <style>
        .el-input {
            width: 600px;
        }

        .el-card {
            width: 600px;
            margin-top: 10px;
            background-color: #fee899;
        }
        .xue {
            background-color: #0dee6a;
            border: 2px solid green;
            border-radius: 5px;
            margin-bottom: 2px;
            height: 39px;
        }
        .xue_red {
            background-color: red;
        }
        .xue_green {
            background-color: green;
        }
        #del {
           
            float:right;
        }
        #abc,
        #def {
            display: inline-block;
        }
    </style>



</head>

<body>
    <div id="app">
        <!--加个Vue的指令 v-mod-->
        <!--textContent 第二个单词命名大写，大驼峰命名-->
        <el-input id="abc" plecehoIder="请您输入内容" v-model="textContent"></el-input>
        <!--加个Vue的指令 v-on:click-->
        <el-button id="def" v-on:click="def">增加</el-button>
        <!--列表内容-->
        <div>
            <el-card>
                
                <div class="xue" v-for="(value,index2) in textList" :class="value.status == false ? 'xue_red':'xue_green'" v-on:click="change(value)">
                    {{value.content}}<el-button id="del">删除</el-button>
                </div>
            </el-card>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                textContent: "",
                textList: []
            },
            methods: {
                def() {
                    var objText = {
                        status:false,
                        content:this.textContent
                    }
                    this.textList.push(objText);
                    this.textContent = ""
                },
                change: function (v) { 
                    v.status= !v.status
                }
            }
        })
    </script>
</body>

</html>